<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <div id="allmap">
               <el-row style="margin-bottom:20px;">
                 <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">运行监控</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item><font color="#A1FEDB"  size="4">负荷系统</font></el-breadcrumb-item>
               
              </el-breadcrumb>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-row >
                        <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                              >负荷系统</span
                            >
                      </el-row>
                  <el-row>
                    <div
                      id="topology-canvas"
                      class="full"
                      @contextmenu="onContextMenu($event)"
                    >
                      <el-button type="primary" class="newbutton3" round>
                <font color="white">视图:</font> {{ scale }}%
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-zoom-in"
                class="newbutton1"
                round
                @click="scaleadd()"
              >
                放大
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-zoom-out"
                class="newbutton2"
                round
                @click="scaleminus()"
              >
                缩小
              </el-button>
              <el-button
                type="primary"
                class="newbutton4"
                round
                @click="reset()"
              >
                重置
              </el-button>
                
                    
                    </div>
                  </el-row>
                </el-col>
                <el-col :span="12">
                   <el-row >
                        <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                              >负荷总功率曲线</span
                            >
                      </el-row>
                
                    <div id="table4"></div>
                 
                </el-col>
              </el-row>
              <el-row>
                <div>
                  <el-row>
                    <el-col :span="12">
                       <el-row >
                        <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                              >运行参数</span
                            >
                      </el-row>
                    
                        <div id="table1">
                             <el-form
                            :label-position="labelPosition"
                            label-width="150px"
                             inline="true"
                            size="mini"
                            style="margin-right:10px;margin-left:60px;padding-top:60px;"
                          >
                            <el-form-item label="输入直流电压">
                              <el-input
                                v-model="formLabelAlign.输入直流电压"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="输入直流电流">
                              <el-input
                                v-model="formLabelAlign.输入直流电流"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="整机正母线电压">
                              <el-input
                                v-model="formLabelAlign.整机正母线电压"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="输入直流功率">
                              <el-input
                                v-model="formLabelAlign.输入直流功率"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="输出直流电压">
                              <el-input
                                v-model="formLabelAlign.输出直流电压"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="输出直流电流">
                              <el-input
                                v-model="formLabelAlign.输出直流电流"
                              ></el-input>
                            </el-form-item>
                              <el-form-item label="A口设置电压">
                              <el-input
                                v-model="formLabelAlign.a口设置电压"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="B口设置电压">
                              <el-input
                                v-model="formLabelAlign.b口设置电压"
                              ></el-input>
                            </el-form-item>
                              <el-form-item label="故障代码1">
                              <el-input
                                v-model="formLabelAlign.故障代码1"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="故障代码2">
                              <el-input
                                v-model="formLabelAlign.故障代码2"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="故障代码3">
                              <el-input
                                v-model="formLabelAlign.故障代码3"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="故障代码4">
                              <el-input
                                v-model="formLabelAlign.故障代码4"
                              ></el-input>
                            </el-form-item>
                          
                          </el-form>
                        </div>
                    
                    </el-col>
                    <!-- <el-col :span="8">
                      <el-row>
                        <div id="table2"></div>
                      </el-row>
                    </el-col> -->
                    <el-col :span="12">
                       <el-row>
                        <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;margin-left:2rem;"
                              >运行状态</span
                            >
                      </el-row>
                     
                        <div id="table3">
                             <el-form
                            :label-position="labelPosition"
                            label-width="150px"
                            :inline="true"
                           
                            size="mini"
                            style="margin-right:10px;margin-left:10px;"
                          >
                            <el-form-item label="运行">
                              <el-input
                                v-model="formLabelAlign1.运行"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="通讯状态">
                              <el-input
                                v-model="formLabelAlign1.通讯状态"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="故障">
                              <el-input
                                v-model="formLabelAlign1.故障"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="模块通信中端">
                              <el-input
                                v-model="formLabelAlign1.模块通信中断"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="输入电压高故障">
                              <el-input
                                v-model="formLabelAlign1.输入电压高故障"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="输入电压低故障">
                              <el-input
                                v-model="formLabelAlign1.输入电压低故障"
                              ></el-input>
                            </el-form-item>
                            <el-form-item label="过流故障">
                              <el-input
                                v-model="formLabelAlign1.过流故障"
                              ></el-input>
                            </el-form-item>
                              <el-form-item label="过温故障">
                              <el-input
                                v-model="formLabelAlign1.过温故障"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="直流过载">
                              <el-input
                                v-model="formLabelAlign1.直流过载"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="母线低压故障">
                              <el-input
                                v-model="formLabelAlign1.母线低压故障"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="母线高压故障">
                              <el-input
                                v-model="formLabelAlign1.母线高压故障"
                              ></el-input>
                            </el-form-item>
                             <el-form-item label="烟感">
                              <el-input
                                v-model="formLabelAlign1.烟感"
                              ></el-input>
                            </el-form-item>
                           
                          
                          </el-form>
                         
                        </div>
                      
                    </el-col>
                  </el-row>
                </div>
              </el-row>
            </div>
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
     <div
      class="context-menu"
      v-if="contextmenu.left && props.node"
      :style="this.contextmenu"
    >
      <CanvasContextMenu2
        :canvas="canvas"
        :props.sync="props"
        @ee="changshow"
        @ee2="showdetialinfo"
      ></CanvasContextMenu2>
     
     
    </div>
     <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item class="form" label="账号:" prop="age">
          <el-input class="input1" v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item  class="form" label="密码:" prop="pass">
          <el-input
          class="input1"
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item  class="form" label="确认密码:" prop="checkPass">
          <el-input
          class="input1"
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item>
          <el-button type="primary" round @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button type="primary" round @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="resetForm('ruleForm')"
          >重置</el-button
        >
        <el-button type="primary" round @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" round @click="showstate">确 定</el-button>
      </span>
    </el-dialog>

   <!-- 提示信息弹出框 -->
     <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >尊敬的用户，您已经获得修改开关状态的权限，当前开关的状态是:{{
          nowstate
        }}，您将在接下来的一分钟内获取修改拓扑开关状态的权限，
        过时权限将失效，需重新登陆。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="dialogVisible2 = false"
          >取 消</el-button
        >
        <el-button type="primary" round @click="showstate2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 显示拓扑中设备详细信息 -->
     <el-dialog
      title="设备详细信息："
      :visible.sync="dialogVisible3"
      width="40%"
      :before-close="handleClose"
      class="newdialo"
    >
       <el-table
                          :data="tableData2"
                          style="width: 100%"
                          :row-style="getRowClass3"
                          :header-row-style="getRowClass3"
                          :header-cell-style="getRowClass3"
                        >
                          <el-table-column
                            prop="data1"
                            label="控件类型"
                           
                          >
                          </el-table-column>
                          <el-table-column
                            prop="data2"
                            label="开关状态"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data3"
                            label="电压(V)"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data4"
                            label="电流(A)"
                          
                          >
                          </el-table-column>
                           <el-table-column
                            prop="data5"
                            label="产生电量(kW)"
                          
                          >
                          
                          </el-table-column>
                           <el-table-column
                            prop="data6"
                            label="剩余电量(kW)"
                          
                          >
                          
                          </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="使用电量(kW)"
                          
                          >
                          
                          </el-table-column>
                           </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="有功功率(kW·h)"
                          
                          >
                          
                          </el-table-column>
                           </el-table-column>
                             </el-table-column>
                           <el-table-column
                            prop="data7"
                            label="无功功率(kW·h)"
                          
                          >
                          
                          </el-table-column>
                         
                        </el-table>
     
    </el-dialog>
  </div>
</template>
<script>
import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu2 from '~/components/CanvasContextMenu2'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      tableData: [
        {
          name1: '微网',
          name2: '0.0',
          name3: '0.0kw',
          name4: '无'
        },
        {
          name1: '分布式电源',
          name2: '无',
          name3: '0.0kw',
          name4: '无'
        },
        {
          name1: '配网',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '总计',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '总计电费',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        }
      ],
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      labelPosition: 'right',
        dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
       level: 1,
        nowstate: '关',
       formInline: {
        data1: '100',
        data2: '200',
         data3: '120',
          data4: '130',
             data5: '120',
                data6: '130',
      },


  ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        age: [{ validator: checkAge, trigger: 'blur' }]
      },


 tableData2: [
        {
          data1: '',
          data2: '',
         data3: '',
         data4: '',
         data5: '',
         data6: '',
         data7: '',
        }
      ],

      labelPosition: 'left',
      formLabelAlign: {
       
      },
      formLabelAlign1:[],

      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '3',
      power1:'',
      power2:'',
      power3:'',

      activeName: 'first',

     
      scroll: true,
    
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu2,
    Index,
    Bottom
  },
  computed: {
    scale() {
      return Math.floor(this.$store.state.canvas.data.scale * 100)
    },
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {
    canvasRegister()
    //控制鼠标右键点击的面板当点击空白处时消失
    if (process.client) {
      document.onclick = event => {
        this.contextmenu = {
          left: null,
          top: null,
          bottom: null
        }
      }
    }
  },

  mounted() {
    // this.canvasOptions.on = this.onMessage
    this.canvas = new Topology('topology-canvas', this.canvasOptions)
    this.open()
     this.readdata()
    this.handle_readtodatabase()
   
    this.laterpowercurve()
   
    //
  },

  methods: {
      readdata() {
      this.$axios({
        method: 'get',
        params: {
          // name: name,
          date: this.value1
        },
        url: 'http://127.0.0.1:8082/totalloadloopdcdc/searchalldata'
      }).then(res => {
         
         this.power1=res.data[0]
      
         this.formLabelAlign=res.data[3]
         //判断
         if( this.formLabelAlign.运行==1){
               this.formLabelAlign1.运行="正常"
         }else{
            this.formLabelAlign1.运行="异常"
         }
          if( this.formLabelAlign.通讯状态==1){
               this.formLabelAlign1.通讯状态="正常"
         }else{
            this.formLabelAlign1.通讯状态="异常"
         }
          if( this.formLabelAlign.故障==1){
               this.formLabelAlign1.故障="故障"
         }else{
            this.formLabelAlign1.故障="正常"
         }
         if( this.formLabelAlign.模块通信中断==1){
               this.formLabelAlign1.模块通信中断="中端"
         }else{
            this.formLabelAlign1.模块通信中断="正常"
         }
          if( this.formLabelAlign.输入电压高故障==1){
               this.formLabelAlign1.输入电压高故障="故障"
         }else{
            this.formLabelAlign1.输入电压高故障="正常"
         }
          if( this.formLabelAlign.输入电压低故障==1){
               this.formLabelAlign1.输入电压低故障="故障"
         }else{
            this.formLabelAlign1.输入电压低故障="正常"
         }
         if( this.formLabelAlign.过流故障==1){
               this.formLabelAlign1.过流故障="故障"
         }else{
            this.formLabelAlign1.过流故障="正常"
         }
         if( this.formLabelAlign.过温故障==1){
               this.formLabelAlign1.过温故障="故障"
         }else{
            this.formLabelAlign1.过温故障="正常"
         }
           if( this.formLabelAlign.直流过载==1){
               this.formLabelAlign1.直流过载="故障"
         }else{
            this.formLabelAlign1.直流过载="正常"
         }
          if( this.formLabelAlign.母线低压故障==1){
               this.formLabelAlign1.母线低压故障="故障"
         }else{
            this.formLabelAlign1.母线低压故障="正常"
         }
         if( this.formLabelAlign.母线高压故障==1){
               this.formLabelAlign1.母线高压故障="故障"
         }else{
            this.formLabelAlign1.母线高压故障="正常"
         }
           if( this.formLabelAlign.烟感==1){
               this.formLabelAlign1.烟感="报警"
         }else{
            this.formLabelAlign1.烟感="正常"
         }
       })
      
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 2000)
    },
    showecharts(){
       
    //
    let myChart4 = this.$echarts.init(document.getElementById('table4'))
    let option4 = {
      // backgroundColor: '#005A5B',
      title: {
        // text: '配电网(单位/伏特)',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['荷总功率']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
         data: [
              '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(时/分)'
            ]
        }
      ],
      yAxis: [
        {  name: '功率/W',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 15,
              padding: 2
            },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
           name: '负荷总功率',
          type: 'line',
          stack: '总量',
          smooth: true, //曲线平滑
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              },
              lineStyle: {
                //线的颜色
                color: '#349e85'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          areaStyle: {},
          data: this.power1,
        }
      ]
    }
    myChart4.setOption(option4)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart4.resize()
    })
   
   
    },
    showstate2(event, data) {
      this.dialogVisible2 = false
      setTimeout(this.cleanage, '60000')
    },
      cleanage() {
      this.ruleForm.age = ''
      this.ruleForm.pass = ''
      this.ruleForm.checkPass = ''
      console.log('执行了定时器，清空了账户')
    },
    showstate() {
      console.log('执行showstate')
      this.dialogVisible = false
      this.dialogVisible2 = true
    },
     handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
      resetForm(formName) {
      this.$refs[formName].resetFields()
    },
     changshow() {
      this.dialogVisible = true
    },
      showdetialinfo(){
     this.dialogVisible3=true
    },
     getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    getRowClass3({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#F50C0C;'
      return 'background:#050E11;color:#18EFF2;'
    },
     //放大画布
    scaleadd() {
     
      let add = this.level
      add = add + 0.1

      this.canvas.scaleTo(add)
      this.level = add
      this.$store.commit('canvas/data', {
        scale: this.level,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },
     scaleminus() {
     
      let minus = this.level
      minus = minus - 0.1
      this.canvas.scaleTo(minus)
      this.level = minus

      this.$store.commit('canvas/data', {
        scale: this.level,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
     
    },
     reset() {
      this.level = 1
      this.canvas.scaleTo(this.level)

      this.$store.commit('canvas/data', {
        scale: 1,
        lineName: this.canvas.data.lineName,
        fromArrowType: this.canvas.data.fromArrowType,
        toArrowType: this.canvas.data.toArrowType,
        fromArrowlockedType: this.canvas.data.locked
      })
    },


 onMessage(event, data) {
      switch (event) {
        //当画布中元素被选中后执行的操作
        case 'node':
          // this.$axios({
          //   method: 'get',
          //   params: {
          // tablename:node.data.text+new Date().getTime()
          // tablename: data.id
          // },
          // url: 'http://127.0.0.1:8082/add/getAll'
          // }).then(res => {
          // console.log(res.data)
          // this.props.value.value_1=res.data[0].speed;
          // console.log( this.props.value.value_1);
          //当选中的时候赋予属性值node
          // this.props = {
          //   a: res.data[0].speed,
          //   node: data,
          //   line: null,
          //   multi: false,
          //   nodes: null,
          //   locked: data.locked
          // }
          // })
          let newtable=[
            { data1:data.id,
            data2:data.name,
            data3:3,
            data4:4,
            data5:100,
            data6:200,
            data7:30,}
           
          ]
          this.tableData2=newtable
          console.log(data)
          this.props = {
            a: data.id,
            node: data,
            line: null,
            multi: false,
            nodes: null,
            locked: data.locked
          }
          if (data.id == '开关通' || data.id == '开关闭') {
            if (
              this.ruleForm.age == '1026263358' &&
              this.ruleForm.pass == '123456' &&
              this.ruleForm.checkPass == '123456'
            ) {
               console.log("密码认证完毕")
              if (data.id == '开关通') {
                 console.log("开关为通")
                data.id = '开关闭'
              
                data.fillStyle = '#15F720'
              } else if (data.id == '开关闭') {
                console.log("开关为比")
                data.id = '开关通'
                data.fillStyle = '#F82109'
              }
              // } else if (data.type == '上') {
              //   data.icon = '\ue919'
              // } else if (data.type == '下') {
              //   data.text = '上'
              //   data.icon = '\ue901'
              // } else if (data.type == '左') {
              //   data.text = '右'
              //   data.icon = '\ue900'
              // } else if (data.type == '右') {
              //   data.text = '左'
              //   data.icon = '\ue906'
              // }

              // console.log(data.iconColor)
              // console.log(data.icon)
            } else {
              this.$message.error('您需要输入账号和密码才能修改控件状态')
            }
          } else {
            this.$message.error('您选择的控件无法操作，请重新选择')
          }

          break
        case 'addNode':
          this.props = {
            node: data,
            line: null,
            multi: false,
            nodes: null,
            locked: data.locked
          }

          break
        case 'line':
        case 'addLine':
          this.props = {
            node: null,
            line: data,
            multi: false,
            nodes: null,
            locked: data.locked
          }
          break
        case 'multi':
          this.props = {
            node: null,
            line: null,
            multi: true,
            nodes: data.nodes.length > 1 ? data.nodes : null,
            locked: this.getLocked(data)
          }
          break
        case 'space':
          this.props = {
            node: null,
            line: null,
            multi: false,
            nodes: null,
            locked: false
          }
          break
        case 'moveOut':
          break
        case 'moveNodes':
        case 'resizeNodes':
          if (data.length > 1) {
            this.props = {
              node: null,
              line: null,
              multi: true,
              nodes: data,
              locked: this.getLocked({ nodes: data })
            }
          } else {
            this.props = {
              node: data[0],
              line: null,
              multi: false,
              nodes: null,
              locked: false
            }
          }
          break
        case 'resize':
        case 'scale':
        case 'locked':
          if (this.canvas && this.canvas.data) {
            this.$store.commit('canvas/data', {
              scale: this.canvas.data.scale || 1,
              lineName: this.canvas.data.lineName,
              fromArrowType: this.canvas.data.fromArrowType,
              toArrowType: this.canvas.data.toArrowType,
              fromArrowlockedType: this.canvas.data.locked
            })
          }
          break
      }
    },

    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#005B5C;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#005B5C;color:#FEFEFE;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },
//将保存到数据库中的拓扑图读出来
    handle_readtodatabase(data) {
      this.$axios({
        method: 'get',
        params: {
          name: '负荷系统'
        },
        url: 'http://127.0.0.1:8082/topology/readtopology'
      }).then(res => {
        console.log(res.data)
        console.log(res.data.data)
        console.log(JSON.parse(res.data.data))
        this.filenamefromson = res.data.toponame
        let newdata = JSON.parse(res.data.data)
        this.canvas.open(newdata)
      })
    },
    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if ( data 
                // data &&
                // Array.isArray(data.nodes) &&
                // Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    },
     onContextMenu(event) {
      event.preventDefault() //阻止默认行为
      event.stopPropagation() //阻止冒泡

      if (event.clientY + 360 < document.body.clientHeight) {
        this.contextmenu = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      } else {
        this.contextmenu = {
          left: event.clientX + 'px',
          bottom: document.body.clientHeight - event.clientY + 'px'
        }
      }
    }
  }
}
</script>
<style lang="scss">
.form .el-form-item__label {
  color: black;
}
.el-form-item__label {
  color: white;
}
.input1 .el-input__inner {
  width: 30rem;
  height: 3rem;

  border-radius: 4px;
  border: 1px solid #b6d8f1;
  color: #6a6f77;
  outline: 0;
  
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size:100% 100%;
  background-repeat: no-repeat;
}
#topology-canvas {
  width: 99%;
  height: 368px;
  background-image: url(../../assets/images/新UI16.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
//控制画布的大小
.newbutton1 {
  position: absolute;
  left: 80%;
  top: 70px;
  z-index: 1;
}
.newbutton2 {
  position: absolute;
  left: 80%;
  top: 130px;
  z-index: 1;
}
.newbutton3 {
  position: absolute;
  left: 80%;
  top: 10px;
  z-index: 1;
}
.newbutton4 {
  position: absolute;
  left: 80%;
  top: 190px;
  z-index: 1;
}

.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;

  background-image: url(../../assets/images/新UI26.png);
  background-repeat: no-repeat;
}

.context-menu {
  position: fixed;
  z-index: 10;
}
.el-button {
  width: 10rem;
  height: 45px;
  margin-top: 13px;
  margin-left: 13px;
  background-image: url(../../assets/images/新UI25.png);

  background-size: 100%;
  border-width: 1px;
  border-radius: 50px;
}

#table1 {
  width: 100%;
  height: 388px;
  background-image: url(../../assets/images/新UI16.png);
   background-size:100% 100%;
  background-repeat:no-repeat;
}

#table2 {
  width: 95%;
  height: 389px;
  margin-left: 0px;
  background-color: #005b5c;
  background-image: url(../../assets/images/新UI16.png);
   background-size:100% 100%;
  background-repeat:no-repeat;
}

#table3 {
  width: 90%;
  height: 321px;
  padding-top: 60px;
  padding-left: 30px;
  margin-left:50px;
  background-image: url(../../assets/images/新UI16.png);
   background-size:100% 100%;
  background-repeat:no-repeat;
}
#table4 {
  width: 90%;
  height: 368px;
  margin-top: 10px;
  margin-left: 60px;
  padding-left: 0px;
  background-image: url(../../assets/images/新UI16.png);
   background-size:100% 100%;
  background-repeat:no-repeat;
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}
.newstyle {
  // background-image: url(../assets/images/新UI.png);
  // padding-top: 50px;
  // margin-left: 23px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
